import 'package:flutter/material.dart';

class AlignPage extends StatefulWidget {
  const AlignPage({Key? key}) : super(key: key);

  @override
  _AlignPageState createState() => _AlignPageState();
}

class _AlignPageState extends State<AlignPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        centerTitle: true,
        title: Text(widget.runtimeType.toString()),
      ),
      body: ListView(
        children: [
          Container(
            color: Colors.lightBlue,
            width: MediaQuery.of(context).size.width,
            height: 200,
            child: const Align(
              child: Text(
                'center',
                style: TextStyle(color: Colors.white, fontSize: 20),
              ),
            ),
          ),
          const SizedBox(
            height: 10,
          ),
          Container(
            //  padding: EdgeInsets.all(0),
            color: Colors.lightGreen,
            width: MediaQuery.of(context).size.width,
            height: 200,
            child: const Align(
              widthFactor: 0.5,
              heightFactor: 1,
              alignment: Alignment.bottomCenter,
              child: Text(
                'bottomCenter',
                style: TextStyle(color: Colors.white, fontSize: 20, backgroundColor: Colors.amber),
              ),
            ),
          ),
          const SizedBox(
            height: 10,
          ),
          Container(
            color: Colors.lightGreen,
            width: MediaQuery.of(context).size.width,
            height: 200,
            child: const Align(
              alignment: Alignment.bottomRight,
              child: Text(
                'bottomRight',
                style: TextStyle(color: Colors.white, fontSize: 20),
              ),
            ),
          ),
          const SizedBox(
            height: 10,
          ),
          Container(
            color: Colors.lightGreen,
            width: MediaQuery.of(context).size.width,
            height: 200,
            child: const Align(
              alignment: Alignment.topCenter,
              child: Text(
                'topCenter',
                style: TextStyle(color: Colors.white, fontSize: 20),
              ),
            ),
          ),
          const SizedBox(
            height: 10,
          ),
          Container(
            color: Colors.lightGreen,
            width: MediaQuery.of(context).size.width,
            height: 200,
            child: const Align(
              alignment: Alignment.topLeft,
              child: Text(
                'topLeft',
                style: TextStyle(color: Colors.white, fontSize: 20),
              ),
            ),
          ),
          const SizedBox(
            height: 10,
          ),
          Container(
            color: Colors.lightGreen,
            width: MediaQuery.of(context).size.width,
            height: 200,
            child: const Align(
              alignment:  Alignment(0, -1),
              child:  Text(
                '0,0是中间，值(0,1,-1)之间',
                style: TextStyle(color: Colors.white, fontSize: 20),
              ),
            ),
          ),
          const SizedBox(
            height: 10,
          ),
          Container(
            color: Colors.lightBlue,
            child: Align(
              widthFactor: 1,
              heightFactor: 2,
              child: Container(
                height: 50,
                width: 50,
                color: Colors.red,
              ),
            ),
          ),
        ],
      ),
    );
  }
}
